<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<div id="app">
	<!-- 父组件，可以在引用子组件的时候，通过 属性绑定(v-bind:)的形式，把需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
	<com1 v-bind:parentmsg="msg"></com1>
</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
var app = new Vue({
	el:'#app',
	data:{msg:'123 - 父组件的数据'},
	components:{
		// 结论：经过演示，发现，子组件中，默认无法访问到父组件中的 data 上的数据和 methods 中的方法
		com1:{
			// 注意：子组件中的data数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如：子组件通过 Ajax,请求回来的数据，都可以放到 data 身上
			// data 上的数据，都是可读可写的 
			data(){
				return {title:'123', content:'qqq'}
			},
			template:'<h1>这是子组件 -{{ title }}-{{ content }}- {{ parentmsg }}</h1>',
			// 注意：组件中的 所有 props 中的数据，都是通过 父组件传递给子组件的
			// props 中的数据，都是只读的，无法重新赋值
			props:['parentmsg'], // 把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
			directives:{},
			filters:{},
			components:{}
		}
	}
})
</script>
</body>
</html>